<template>
<div id="search-bar">
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入你想要的商品"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
</div>
  
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Toast } from 'vant';

Vue.use(Search);
Vue.use(Toast);

export default {
  name:'SearchBar',
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch() {
      this.$http({
        url:'/api/public/v1/goods/search',
        methods:'get',
        params:{
          query:this.value,
        },
      }).then(res=>{
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
      var arrStr = localStorage.getItem("historyData")
      var arr = JSON.parse(arrStr)
      arr.push(this.value)
      arr = [...new Set(arr)]
      localStorage.setItem("historyData",JSON.stringify(arr))
      this.$emit('historyChange',this.value)
      this.value = ''
    },
    onCancel() {
      
    },
  },
};
</script>

<style>
#search-bar form .van-search{
  background: rgb(238,238,238);
}
#search-bar form .van-search__content{
  background: #fff;
}
#search-bar form .van-search__action{
  padding: 0 20px;
  margin: 0 10px;
  border: 1px solid gray;
  border-radius: 5px;
}
</style>